import React, { Component } from 'react'
import { NavBar, Icon, SearchBar } from 'antd-mobile'
import './SearchCenter.scss'
import myaxios from '../../utils/myaxios'
import { withRouter } from 'react-router-dom'

class SearchCenter extends Component {
    state = {
        inputVal: '',
        productList: []
    }
    
    getProductList = (params) => {
        console.log('获取产品列表');
        myaxios
            .get('goods/qsearch', {
                params: {
                    query: this.state.inputVal,
                }
            })
            .then((res) => {
                console.log(res);
                this.setState({
                    productList: res,
                })
            })
    }

    handleItemClick = (e) => {
        let good_id = e.target.getAttribute('data-goods_id');
        this.props.history.push('/goodDetail/' + good_id);
    }

    render() {
        return (
            <div className='yg-sc'>
                {/* 顶部 */}
                <NavBar
                    className='yg-sc-nav'
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                >
                    搜索中心
                </NavBar>
                {/* 顶部 */}
                {/* 搜索中心输入框 */}
                <SearchBar
                    className='yg-sc-search'
                    value={this.state.inputVal}
                    placeholder="Search"
                    onCancel={() => this.getProductList()}
                    showCancelButton
                    cancelText='搜索'
                    // 内容改变的时候触发
                    onChange={(value) => {
                        console.log(value);
                        this.setState({
                            inputVal: value,
                        });
                    }}
                
                />
                {/* 搜索中心输入框 */}
                {/* 产品列表 */}
                <div className="yg-sc-list" onClick={this.handleItemClick}>
                    {this.state.productList.map((v) => {
                        return (
                            <div className='sc-list-item' key={v.goods_id} data-goods_id={v.goods_id}>{v.goods_name}
                            </div>
                        )
                    })}
                </div>
                {/* 产品列表 */}
            </div>
        )
    }
}
export default withRouter(SearchCenter);